<template>
    <div>
        <p class="none" v-if="formData.length == 0">暂无数据</p>
        <div class="art flex" v-for="(item,index) in formData" :key="item.uid" v-else>
            <!-- 左边 -->
            <div class="left">
                <el-scrollbar style="height:calc(100% - 50px)">
                    <!-- 标题 -->
                    <div class="title flex flex-y flex-between">
                        <div class="flex flex-y">
                            <h3 class="nowrap header">{{item.title}}</h3>
                            <!-- <el-tag
                                effect="plain"
                                size="small"
                                class="tag"
                                type="success"
                                v-if="item.reviewFlag">已通过</el-tag> -->
                            <el-tag
                                effect="plain"
                                size="small"
                                class="tag">待审核</el-tag>
                        </div>
                        <p class="none right10">{{filter_date(item.reviewDate)}}</p>
                    </div>
                    <!-- 头像 -->
                    <div class="profile flex flex-y">
                        <div class="pic">
                            <img :src="item.headImg?item.headImg:common.defaultImg" alt="头像">
                        </div>
                        <p class="name">{{item.accountName}}</p>
                    </div>
                    <!-- 主内容 -->
                    <div class="content" v-html="item.content">

                    </div>
                </el-scrollbar>
                <!-- 按钮组 -->
                <div class="btns flex flex-y">
                    <!-- <el-select
                        style="width:140px"
                        class="right10"
                        v-model="item.value_reason"
                        placeholder="请选择"
                        size="small"
                        clearable>
                        <el-option
                            v-for="obj in list_reason"
                            :key="obj.value"
                            :label="obj.label"
                            :value="obj.value">
                        </el-option>
                    </el-select>
                    <el-input
                        style="width:180px"
                        class="right10"
                        v-model="item.value_note"
                        placeholder="备注"
                        size="small">
                    </el-input> -->
                    <el-button
                        type="danger"
                        plain
                        size="small"
                        @click="pass('no',item.userUid,item.uid,item.title,index)">拒绝</el-button>
                    <el-button
                        type="success"
                        plain
                        size="small"
                        @click="pass('yes',item.userUid,item.uid,item.title,index)">通过</el-button>
                </div>
            </div>
            <!-- 右边 -->
            <div class="right">
                <p class="none bottom10">封面</p>
                <div class="imgs flex flex-wrap bottom20">
                    <p class="none" v-if="item.coverImgs.length == 0">暂无数据</p>
                    <div
                        v-else
                        class="pic"
                        @click="url = child,ifShow = !ifShow"
                        v-for="child in item.coverImgs"
                        :key="child">
                        <img :src="child">
                    </div>
                </div>
                <p class="none bottom10">图片</p>
                <div class="imgs flex flex-wrap">
                    <p class="none" v-if="item.normalImgs.length == 0">暂无数据</p>
                    <div
                        v-else
                        class="pic"
                        @click="url = child,ifShow = !ifShow"
                        v-for="child in item.normalImgs"
                        :key="child">
                        <img :src="child">
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <page
            :total="pageTotal"
            @change="changePage"
            :sizes="pageSize"
            noSizes="total, prev, pager, next, jumper">
        </page>
        <!-- 图片预览 -->
        <cmsPreview :ifShow="ifShow" :url="url"></cmsPreview>
    </div>
</template>

<script>
import {formatDate} from '@/utils/formatDate.js'
import page from '@/components/public/Pagination'
export default {
    props:["search","date"],
    components:{
        page
    },
    data () {
        return {
            // 图片预览
            ifShow:false,
            url:"",

            //拒绝
            list_reason:[
                {
                    value:"包含敏感词",
                    label:"包含敏感词"
                },
                {
                    value:"文章涉嫌抄袭",
                    label:"文章涉嫌抄袭"
                },
                {
                    value:"文章被投诉",
                    label:"文章被投诉"
                }
            ],

            //文章列表
            formData:[],

            //分页
            pageNum: 1,
            pageSize:10, //后端写死了
            pageTotal:"",

            //other
            loading:true
        }
    },
    watch:{
        //搜索
        search(val){
            this.list();
        },
        //日期
        date(val){
            this.list();
        },
    },
    methods:{
        //列表
        list:function(){
            HTTP('article_list', {
                pageNum:this.pageNum,
                searchParam:this.search,
                beginDate:this.date?this.date[0]:'',
                endDate:this.date?this.date[1]:''
            })
            .then(res=>{
                if(res.code == 200){
                    this.formData = res.data.list;
                    //page
                    this.pageTotal = res.data.total;
                    this.pageSize = res.data.pageSize;
                    if(this.formData.length>0){
                        // 为了方便处理封面图片暂无数据的问题
                        this.formData.map(o=>{
                            let coverImgs = []; //封面
                            let normalImgs = []; //图片
                            if(o.pictures.length>0){
                                o.pictures.map(k=>{
                                    //封面图集合
                                    if(k.coverPicture){
                                        coverImgs.push(k.imgUrl);
                                    }
                                    //普通图片集合
                                    else{
                                        normalImgs.push(k.imgUrl);
                                    }
                                })
                            }
                            o.coverImgs = coverImgs; //封面
                            o.normalImgs = normalImgs; //图片
                        })
                        console.log(this.formData);
                    }
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //拒绝，通过
        pass:function(type,userUid,uid,title,n){
            console.log(this.formData);
            let msg = type=='yes'?'通过':'拒绝';
            this.$confirm(`确定要${msg}该文章吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                //请求
                let reviewResult = this.formData[n].value_reason?this.formData[n].value_reason + ':':this.formData[n].value_note;
                HTTP('article_check', {
                    userUid:userUid,
                    uid:uid,
                    title:title,
                    status:type=='yes'?'1':'0',
                    reviewResult:type=='yes'?'':reviewResult
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('操作成功');
                        this.formData.splice(n,1);
                        this.$emit('changeTotal',1);
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            })
        },
        //改变分页
        changePage:function(obj){
            this.pageNum = obj.pageNum;
            this.list();
        },
        //时间戳转时间
        filter_date:function(time){
            let date = new Date(time*1000);
            return formatDate(date,'yyyy-MM-dd hh:mm:ss');
        },
    },
    mounted(){
        this.list();
    }
}
</script>

<style lang="scss" scoped>
    //滚动条
    /deep/.el-scrollbar__wrap{
        overflow-x: hidden;
    }
    .art{
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        padding: 20px 20px 40px 20px;
        margin-bottom: 20px;
        .left{
            width: calc(100% - 220px);
            margin-right: 20px;
            height: 500px;
            position: relative;
            .header{
                max-width: 450px;
            }
            .tag{
                margin-left: 10px;
            }
            .profile{
                padding: 10px 0;
                .pic{
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        min-height: 25px;
                    }
                }
                .name{
                    color: #999;
                    margin-left: 12px;
                    font-size: 14px;
                }
            }
            .content{
                width: 100%;
                // v-html的样式
                /deep/ img{
                    display: none;
                }
            }
            .btns{
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
        .right{
            width: 200px;
            .none{
                color: #666;
            }
            .imgs{
                .pic{
                    width: 100px;
                    height: 100px;
                    padding: 4px;
                    overflow: hidden;
                    cursor: pointer;
                    img{
                        width: 100%;
                        min-height: 100px;
                    }
                }
            }
        }
    }
</style>
